<template>
	<view>
		<view class="text-center bg-white padding">
			<image class="cu-avatar xl round margin-top" :src="company?.logo" mode="aspectFill"></image>
			<view class="margin">
				{{company?.company_name}}
			</view>
			<view class="margin">
				{{company?.industry}}
			</view>
			<view class="">
				<view class="cu-avatar round sm bg-green margin-right-xs">
					<text class="iconfont icon-a-001_weizhi"></text>
				</view>
				{{company?.location}}
			</view>
		</view>
		
		<custom-tab v-model="actIdx"/>
		
		<!-- 企业信息 -->
		<view v-if="actIdx==0">
			<view class="padding bg-white">
				<view class="text-bold">
					公司简介
				</view>
				<view class="text-grey">
					{{company?.introduction}}
				</view>
			</view>
			
			<view class="padding bg-white margin-top-sm">
				<view class="text-bold">
					公司地址
				</view>
				<view class="text-grey">
					{{company?.address}}
				</view>
			</view>
			<view class="padding bg-white">
				<view class="text-bold">
					法人代表
				</view>
				<view class="text-grey">
					{{company?.legal_representative}}
				</view>
			</view>
			<view class="padding bg-white">
				<view class="text-bold">
					员工人数
				</view>
				<view class="text-grey">
					{{company?.company_size}}
				</view>
			</view>
			<view class="padding bg-white">
				<view class="text-bold">
					企业类型
				</view>
				<view class="text-grey">
					{{company?.financing_stage}}
				</view>
			</view>
		</view>
	
		<!-- 岗位列表 -->
		<view class="padding bg-white" v-if="actIdx==1">
			<company-job
				v-for="(item,index) in jobList" 
				:key="index"
				:data="{job:item}"
				:class="{'job-active':item.check}"
				@click="item.check=!item.check"
			/>
		</view>
		
		<view class="cu-bar foot bg-white" v-if="actIdx==1">
			<button class="cu-btn bg-orange" @click="handleJobBatch">
				岗位关联
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import http from '../../utils/http'
import { ref, type Ref } from 'vue';
import type { CompanyType, JobType } from '@/model/company';
import jobData from  '../../utils/job'
// 通过路由接收企业id，发起网络请求，渲染企业信息
const company:Ref<CompanyType|null> = ref(null)
onLoad(async(options)=>{
	let companyId =  options?.id || '68930920e0c6c158323b9726'
	// 方法1:
	// let res = await  http.get('/classes/company',{
	// 	params:{where:{"objectId":companyId}},
	// })
	// 方法2:
	let res = await http.get(`/classes/company/${companyId}`)
	// console.log('详情数据',res);
	company.value = res.data
})

// 菜单交互
const actIdx = ref<number>(0)


// 岗位列表渲染
const jobList:Ref<Array<JobType>> = ref([])
jobData.forEach(item=>{
	item.check=false
})
jobList.value = jobData as Array<JobType>

// 岗位与公司的批量关联操作
const handleJobBatch = ()=>{
	//1. 过滤被选中的数据
	let checkList = jobList.value.filter(item=>item.check)
	//2. 将被选中的数据格式整理为批量操作接口所需要的格式
	let arr = checkList.map(item=>{
		return {
			method:"POST",
			path:"/1.1/classes/job",
			body:{
				...item,  //岗位数据
				companyId:company.value?.objectId,
				logo:company.value?.logo,   //冗余字段、提高后续查询效率
				company_name:company.value?.company_name
			}
		}
	})
	console.log(checkList);
	console.log(arr);
	// 3. 发起批量操作请求
	http.post('/batch',{"requests":arr})
}
</script>

<style lang="scss">
    
.text-grey{
	line-height: 60upx;
	margin-top: 10upx;
}
.job-active{
	border-color: #FD7753 !important;
	border-width: 1px !important;
}
.cu-bar.foot button{
	width: 90%;
	margin-left:5%;
}
</style>
